// pages/poiSearch/poiSearch.js
// import utils from '../../utils/util.js';
import utils from '../../utils/util.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //TAG DATA MAP , 地图相关数据
    map_class: 'map',
    markers:[],
    circle:[],
    latitude:23.545857,
    longitude:113.581897,

    center_latitude:23.545857,
    center_longitude:113.581897,

    isMapFold:false, // 默认地图处于折叠状态
    isShowPositioning:false,//按钮默认都隐藏

    currentList:[],//显示在界面的位置列表
    poiSelect:{ //encodeURI
      parking:"%E5%81%9C%E8%BD%A6%E5%9C%BA",
      adominate: "%E4%BD%8F%E5%AE%BF",
      food: "%E7%BE%8E%E9%A3%9F"
    },
    currentBtn_POIItem: -1, //列表样式控制
  },

  /**
   * TAG LISTEN MAP , 地图相关监听函数
   */
  regionchange(e){
    if(this.data.isShowPositioning == false){
      return ;
    }
    if(e.type == "end"){
      console.log("[MAPCHANGE] -- 当前地图中心经纬度：",e.detail.centerLocation)
      //将当前经纬度保存起来，如果用户点击起点或者终点，那就将当前经纬度得到的地址发起请求。。
      this.setData({
        center_longitude: (e.detail.centerLocation.longitude).toFixed(6),
        center_latitude: (e.detail.centerLocation.latitude).toFixed(6)
      });
  
      //发送请求,进行逆地址解析
      this.Geocoder(this);

    }
  },
  //这个感觉没有用
  markertap(e){

  },
//绘制marker，这个界面的Marker直接替换就行了，没有替换的必要
 drawMarker(){
  let poiList = this.data.currentList;
  let markerArr = [];
  let max_radius = -1;
  for(let i=0;i<poiList.length;i++){
    max_radius = poiList[i]._distance > max_radius? poiList[i]._distance : max_radius;
    let startMarker = {
      id: Number(poiList[i].id),
      iconPath: "../../images/caddress.png",
      longitude: poiList[i].location.lng,
      latitude: poiList[i].location.lat,
      width: 15,
      height: 15,
      zIndex: 1000,
      // label:{
      //   content:item.title,
      //   color:'#002329',
      //   fontSize:12,
      //   borderWidth:4,
      //   borderColor:'#10239e',
      //   borderRadius:8,
      //   bgColor:'#e6f7ff',
      //   padding:4,
      //   textAlign:"center",
      // }
      callout:{
        content: poiList[i].title,
        color:'#002329',
          fontSize:12,
          borderWidth:4,
          borderColor:'#10239e',
          borderRadius:8,
          bgColor:'#e6f7ff',
          padding:4,
          textAlign:"center",
          display:'BYCLICK'
      }
    };
    markerArr.push(startMarker);
  }


  //无聊画个圆形
  let _circle = {
    latitude: Number(this.data.center_latitude),
    longitude: Number(this.data.center_longitude),
    color: '#0078d4',
    fillColor: "#deecf952",
    radius: max_radius,
    strokeWidth: 1
  };
  let a = [];
  a.push(_circle)

  this.setData({
    markers: markerArr,
    circle: a
  });

 },
  


  //地图右下角
  //右下角定位图标的监听函数
showPositioning:function(e){
  if(this.data.isShowPositioning == true){//收缩
    this.setData({
      isShowPositioning: false,
    });
  }else{//展开
    this.setData({
      isShowPositioning: true,
    });
  }
},

/**
 * TAG LISTEN MAPPING 
 * 地图右下角的几个按钮的监听函数，点击之后其实就是换个关键词就好了
 */
setParking(e){
  //请求对应的POI数据，然后将数据设置到currentList上面？
  let res = this.getPOI(this.data.poiSelect.parking,this.data.center_latitude,this.data.center_longitude,1000);
  wx.showLoading({
    title: '正在请求数据中',
  })
  res.then((res)=>{
    wx.hideLoading();
    console.log("[PARKING] -- 停车场查询到的数据：",res);
    //存起来！
    this.setData({
      currentList: res.data
    });

    //然后将该数据制作为Marker
    this.drawMarker();

  }).catch(err=>{
    console.log("[PARKING][ERR] -- 停车场出错",err)
    wx.hideLoading();
  });
},
setResturan(e){
  let res = this.getPOI(this.data.poiSelect.food,this.data.center_latitude,this.data.center_longitude,1000);
  wx.showLoading({
    title: '正在请求数据中',
  });
  res.then((res)=>{
    wx.hideLoading();
    console.log("[FOOD] -- 附近食宿查询到的数据：",res);
    //存起来！
    this.setData({
      currentList: res.data
    });

    //然后将该数据制作为Marker
    this.drawMarker();

  }).catch(err=>{
    console.log("[FOOD][ERR] -- 停车场出错",err)
    wx.hideLoading();
  });
},
setAssociate(e){
  let res = this.getPOI(this.data.poiSelect.adominate,this.data.center_latitude,this.data.center_longitude,1000);
  wx.showLoading({
    title: '正在请求数据中',
  });
  res.then((res)=>{
    wx.hideLoading();
    console.log("[ACCOMENDATION] -- 附近宿舍查询到的数据：",res);
    //存起来！
    this.setData({
      currentList: res.data
    });

    //然后将该数据制作为Marker
    this.drawMarker();

  }).catch(err=>{
    console.log("[ACCOMENDATION][ERR] -- 停车场出错",err)
    wx.hideLoading();
  });
},
//点击打电话
phone(e){
  wx.makePhoneCall({
    phoneNumber: e.currentTarget.dataset.tel,
  });
},

//使用微信小程序内置的导航，
Navigation(e){
  console.log(e)
  let lat = e.currentTarget.dataset.location.lat;
  let lng = e.currentTarget.dataset.location.lng;
  wx.openLocation({
    latitude: lat,
    longitude: lng,
  });
},
//点击单个项目就聚焦到该点上
PoiItem(e){
  if(e.currentTarget.dataset.index == this.data.currentBtn_POIItem){
    this.setData({
      currentBtn_POIItem: -1
    });
    return;
  }else{
    this.setData({
      currentBtn_POIItem: e.currentTarget.dataset.index
    });
    //聚焦
    this.focus_map(e.currentTarget.dataset.item.location.lng, e.currentTarget.dataset.item.location.lat);

  }
},

focus_map(lng,lat){
  let _points =[];
    _points.push({
      longitude: lng,
      latitude: lat
    });
    //点击聚焦
    let mapContext = wx.createMapContext('poiMap');
    mapContext.includePoints({
      points:_points,
      padding:[100,100,100,100]
    });
},






/**
 * TAG REQUEST
 */

//逆地址解析，是地图右下角定位使用的，将经纬度信息逆地址转化为 TAG DEBOUNCE
Geocoder:utils.debounce((context)=>{
  context.setData({
    isLoading_POSITION: true, //设置正在加载中，界面可能要用到
    center_location:'',
  });

  //向腾讯位置服务发送逆地址解析服务
  wx.request({
    url: 'https://apis.map.qq.com/ws/geocoder/v1/',
    method: 'GET',
    data: {
        key: '64CBZ-OA5K4-KH3UV-DMCQX-2P4MJ-VJFQD',
        location: context.data.center_latitude + ',' + context.data.center_longitude
    },
    success:function(res){
      console.log("[REQUEST][geoCode] -- 逆地址解析",res)
      if(res.data.status == 0){//请求地址成功之后，需要做的事情有两件，一是将地址数据保存到地址栏中去，二是构造一个point对象，提供给路线规划使用
        let address = typeof(res.data.result.formatted_addresses.recommend) == undefined? '该地点无法解析' : res.data.result.formatted_addresses.recommend;
        //构造出来的假点，数据不完整，但也够用了
        // let temple_point = {
        //   title: address,
        //   location: {
        //     lat: res.data.result.location.lat,
        //     lng: res.data.result.location.lng
        //   }
        // }
        
        context.setData({
          center_location: address, //地址，界面显示用
          // center_point: temple_point,
          isLoading_POSITION:false
        })

      }
    },
    fail:function(res){
      console.log("[REQUEST][geocode]",res)
      wx.showToast({
        title: '地址解析失败',
      })
    }
  });



},500,false),


//TAG REQUEST POI
//向腾讯位置服务Web服务获取相关的POI信息
getPOI(keyword,lat,lng,radius){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      method: 'GET',
      data:{
        key: '64CBZ-OA5K4-KH3UV-DMCQX-2P4MJ-VJFQD',
        keyword: keyword,
        boundary: 'nearby('+lat+','+lng+','+radius+')'
      },
      success:function(res){
        console.log("[REQUEST][POI] -- poi查询到的信息：",res);
        if(res.data.status == 0){
          resolve(res.data);
        }else{
          reject(res)
        }
      },
      fail:function(res){
        reject(res)
      }
    })
  });
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})